<template>
  <div class="base-node">
    <div class="base-node-icon" :style="{background: properties.icon ? properties.icon : ( ['StartNode','EndNode'].includes(model.type) ?'#683ced': '') }"></div>
    <div class="base-node-title">{{ properties.title ? properties.title : '新增节点' }}</div>
    <!-- 顶部操作按钮 -->
    <div class="base-node-operation" v-show="!(model.type == 'StartNode') && (isSelected || isHovered)">
      <i class="el-icon-document-copy" v-show="!(model.type == 'EndNode')" @click.stop="copyNodeEvent"></i>
      <i class="el-icon-delete" @click.stop="deleteNodeEvent"></i>
    </div>
    <!-- 添加新节点按钮 -->
    <div class="base-node-next" v-show="!(model.type == 'EndNode') && (isSelected || isHovered)">
      <el-popover ref="popoverRef" placement="right" trigger="hover" >
        <div class="popover-title">可添加节点:</div>
        <div class="node-popovers">
          <div v-for="(item,key) in typeMap" :key="key" @click.stop="addNodeEvent(key)" >{{item}}</div>
        </div>
        <i slot="reference" class="el-icon-circle-plus next-icon"></i>
      </el-popover>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    // 当前节点
    model: Object,
    // 图形模型
    graphModel: Object,
    // 是否被选中
    isSelected: Boolean,
    // 是否移入
    isHovered: Boolean,
    // 是否禁用
    disabled: Boolean,
    // 携带的自定义参数
    properties: Object
  },
  data (){
    return {
      typeMap:{
        DataNode: '数据节点',
        EndNode: '结束节点'
      }
    };
  },
  mounted () {
  },
  methods: {
    /**
     * 添加新的节点
     * 使用新增节点方法添加一个节点(设置位置偏移);
     * 使用新增连线方法将当前节点和新节点连接
     */
    addNodeEvent (type){
      let title = this.typeMap[type];
      let nodeData = {
        graphModel : this.graphModel,
        model: this.model,
        type: type,
        title: title
      }
      this.graphModel.eventCenter.emit(`node:add-node`, nodeData);
      this.$refs.popoverRef.doClose();
    },

    /**
     * 复制节点
     */
    copyNodeEvent (){
      this.graphModel.cloneNode( this.model.id );
    },
    
    /**
     * 删除节点
     */
    deleteNodeEvent (){
      this.graphModel.deleteNode( this.model.id );
    },

  },
};
</script>

<style  scoped>
.base-node{
  display: flex;
  position: relative;
  width: 120px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #bac1d0;
  border-radius: 4px;
  background-color: #fff;
}
.base-node-icon,
.base-node-title{
  float: left;
}
.base-node-icon{
  width: 24px;
  height: 100%;
  background-color: #26c9f2;
  border-right: 1px solid #bac1d0;
}
.base-node-title{
  flex: 1;
  padding:0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.base-node-operation{
  display: flex;
  position: absolute;
  top: -20px;
  right: 0;
  height: 20px;
}
.base-node-operation>i{
  padding-left: 2px;
}
.base-node-next{
  position: absolute;
  top:0;
  right: -28px;
  width: 20px;
}
.next-icon {
  color: #33dd89;
  font-size: 20px;
  cursor: pointer;
}
/* 新增节点弹窗 */
.popover-title{
  padding-bottom: 4px;
}
.node-popovers>div{
  height: 24px;
  line-height: 24px;
  padding:0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: #F3F6FA;
  cursor: pointer;
}
.node-popovers>div:hover{
  background-color: #dee7f2;
}
</style>